<script>
import commonJs from "@/util/commonJs";
import {getMenuList} from "@/api/menu";

export default {
  name: "topMenu",
  inject: ["TopMenuOption"],
  mixins: [commonJs],
  data() {
    return {
      notPage: true,
      menuList: []
    }
  },
  methods: {
    getMenu() {
      let clientId = localStorage.getItem("appId")
      getMenuList({parentId: 0, clientId: clientId}).then(res => {
        let {data} = res.data;
        if (data && data.length > 0) {
          this.menuList = data.filter(i => delete i.children)
        }
      })
    }
  },
  mounted() {
    this.getMenu();
  }
}
</script>

<template>
  <basic-container>
    <avue-crud :option="TopMenuOption"
               :data="data"
               @current-change="currentChange"
               @size-change="sizeChange"
               @selection-change="v=>selection=v"
               ref="crud"
               :page.sync="page">

      <template slot="menuLeft">
        <el-button size="small" type="primary"
                   @click="addToTabsList('顶部菜单',{oid:-1,menuList},'topMenuTemp','open')">新增
        </el-button>
        <el-button size="small" @click="remove(selection)" :disabled="selection.length===0">删除</el-button>
      </template>

      <template slot="menu" slot-scope="{row}">
        <el-button type="text" @click="addToTabsList(row.name+'顶部菜单',{...row,menuList},'topMenuTemp','view')">查看详情
        </el-button>
        <el-button type="text" @click="addToTabsList(row.name+'顶部菜单',{...row,menuList},'topMenuTemp','edit')">修改
        </el-button>
      </template>
    </avue-crud>

    <ms-drawer @refresh="getList()" :visible.sync="visible" :tab-list.sync="tabsList"></ms-drawer>
  </basic-container>
</template>

<style scoped lang="scss">
</style>
